<!--融资申请界面-->
<template>
    <div class="goods-box5">
        <div class="goods" v-for="(item, index) in imgArray" :key="index" @click="DetailBtn(item)">
            <img class="imgs" :src="item.icon" alt="" />
        </div>
    </div>
</template>

<script setup>
import store from "@/store";
import { useRouter } from "vue-router";
import { selectBank } from "@/api/finance";
import bank1001 from '@/assets/img/bank1001.jpg'
import bank1002 from '@/assets/img/bank1002.jpg'
import bank1003 from '@/assets/img/bank1003.jpg'
import bank1004 from '@/assets/img/bank1004.jpg'
import bank1005 from '@/assets/img/bank1005.jpg'
import bank1006 from '@/assets/img/bank1006.jpg'
import bank1007 from '@/assets/img/bank1007.jpg'
import bank1008 from '@/assets/img/bank1008.jpg'
import bank1009 from '@/assets/img/bank1009.jpg'
import bank1010 from '@/assets/img/bank1010.jpg'
import { ref } from "vue";
import { ElMessage } from "element-plus";
const router = useRouter();
const imgArray = ref([
    { id: '1001', icon: bank1001, data: {} },
    { id: '1002', icon: bank1002, data: {} },
    { id: '1003', icon: bank1003, data: {} },
    { id: '1004', icon: bank1004, data: {} },
    { id: '1005', icon: bank1005, data: {} },
    { id: '1006', icon: bank1006, data: {} },
    { id: '1007', icon: bank1007, data: {} },
    { id: '1008', icon: bank1008, data: {} },
    { id: '1009', icon: bank1009, data: {} },
    { id: '1010', icon: bank1010, data: {} },
])

const load = () => {
    selectBank().then(res => {
        if (res.flag && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
                imgArray.value.map((item1) => {
                    if (item1.id == res.data[i].bankId) {
                        Object.assign(item1.data, res.data[i]);
                        return item1;
                    }
                });
            }
        } else {
            ElMessage.error('获取数据失败')
        }
    })
}

load()

const DetailBtn = (item) => {
    store.state.bankInfo = item
    router.push({
        name: 'FinancingDetails',
    })
}

</script>

<style lang="scss" scoped>
.goods-box5 {
    background-color: #f9f9f9;
    width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    // justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;

    .goods {
        width: 200px;
        height: 180px;
        background-color: white;
        border-radius: 6px;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .imgs {
            width: 150px;
            height: 140px;
            margin-right: 10px;
            border-radius: 6px;
        }
    }
}
</style>